<template>
  <div class="contentBox">
    <a-row :gutter="24" style="margin-bottom: 20px">
      <a-col :span="22">
        <a-select
          ref="select"
          v-model:value="selectLianluCode"
          style="width: 180px"
          :showSearch="true"
          allowClear
          placeholder="请选择链路编号"
          @change="changeLianluSelect"
        >
          <a-select-option
            v-for="item in selectLianluDataList"
            :key="item.lianlu_code"
            :value="item.lianlu_code"
          >{{item.lianlu_code}}</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="2">
        <a-button type="primary" @click="addLianlu">新增</a-button>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data-source="zongjuData.lianluData"
      bordered
      :autoDataLoad="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record  }">
        <template v-if="column.dataIndex === 'lianlu_status'">
          <span>
            <a-tag
              :color="record.lianlu_status ? 'green' : '#aaa'"
            >{{ record.lianlu_status ? '正常' : '未启用' }}</a-tag>
          </span>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a href="#" @click="editLianlu(record)">编辑</a>
          <a-popconfirm
            title="确定要删除这一条链路吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="delLianlu(record.id)"
          >
            <a href="#" style="margin-right: 20px; margin-left: 20px; color: red">删除</a>
          </a-popconfirm>
          <a href="#" style="color: green" @click="copyLianluInfo(record)">复制信息</a>
        </template>
      </template>
      <template #title>总局</template>
      <template #footer>总局链路信息</template>
    </a-table>
    <a-drawer
      :title="zongjuData.isAdd?'新增链路':'编辑链路'"
      :width="720"
      :visible="zongjuData.isShow"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="closeDrawer"
    >
      <a-form
        :model="form"
        :rules="rules"
        layout="vertical"
        ref="formRef"
        @finish="zongjuData.isAdd?saveLianlu():updataLianlu()"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="链路编号" name="lianlu_code">
              <a-input v-model:value="form.lianlu_code" placeholder="请输入链路编号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="链路名称" name="lianlu_name">
              <a-input v-model:value="form.lianlu_name" placeholder="请输入链路名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="链路起始库" name="lianlu_start">
              <a-select
                ref="select"
                v-model:value="form.lianlu_start"
                :showSearch="true"
                allowClear
              >
                <a-select-option value="请选择节点名称" disabled>请选择节点名称</a-select-option>
                <a-select-option
                  v-for="item in nodeLists"
                  :key="item.node_name"
                  :value="item.node_name"
                >{{item.node_name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="链路终止库" name="lianlu_end">
              <a-select ref="select" v-model:value="form.lianlu_end" :showSearch="true" allowClear>
                <a-select-option value="请选择节点名称" disabled>请选择节点名称</a-select-option>
                <a-select-option
                  v-for="item in nodeLists"
                  :key="item.node_name"
                  :value="item.node_name"
                >{{item.node_name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="链路状态" name="lianlu_status">
              <a-radio-group v-model:value="form.lianlu_status">
                <a-radio :value="0">未启用</a-radio>
                <a-radio :value="1">正常</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item :wrapper-col="{ offset: 18 }">
              <a-space>
                <a-button @click="closeDrawer">取消</a-button>
                <a-button type="primary" html-type="submit">保存</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #extra>
        <a-space>
          <a-button type="primary" @click="resetForm">重置</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue';
import { getAllZongjuLianlu, addZongjuLianlu, delZongjuLianlu, updataZongjuLianlu } from '@/utils/zongjuLianlu'
import { getAllNode } from '@/utils/node'
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';

interface LianluDataDto {
  id?: number
  lianlu_code: string
  lianlu_name: string
  lianlu_start: string
  lianlu_end: string
  lianlu_status: number
}

interface ResultDto {
  code: number
  data: Array<LianluDataDto>
  message: string
}

interface nodeDataDto {
  id: number
  node_name: string
}

interface NodeResultDto {
  code: number
  data: Array<nodeDataDto>
  message: string
}

const columns = [
  {
    title: '链路编号',
    dataIndex: 'lianlu_code',
  },
  {
    title: '链路名称',
    dataIndex: 'lianlu_name',
  },
  {
    title: '链路起始库',
    dataIndex: 'lianlu_start',
  },
  {
    title: '链路终止库',
    dataIndex: 'lianlu_end',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

// let data: LianluDataDto[] = [];
export default defineComponent({
  setup() {
    const formRef = ref<FormInstance>();
    let form = reactive<LianluDataDto>({
      id: 0,
      lianlu_code: '',
      lianlu_name: '',
      lianlu_start: '请选择节点名称',
      lianlu_end: '请选择节点名称',
      lianlu_status: 0
    });
    // 数据
    let zongjuData = reactive({
      lianluData: [],
      isShow: true,
      isAdd: true
    })
    // 下拉选择框数据列表
    let selectLianluDataList: Ref<LianluDataDto[]> = ref([]);
    // 选中的选择链路的code
    let selectLianluCode: Ref<string | undefined> = ref(undefined);
    let tableLoading: Ref<boolean> = ref(false)
    let selectedNodeName = ref('请选择节点名称')
    let nodeLists: nodeDataDto[] = reactive([])
    const rules: Record<string, Rule[]> = {
      lianlu_code: [{ required: true, message: '请输入链路编号', trigger: 'blur' }],
      lianlu_name: [{ required: true, message: '请输入链路名称' }],
      lianlu_start: [{ required: true, message: '请输入链路名称' }],
      lianlu_end: [{ required: true, message: '请输入链路名称' }],
      lianlu_status: [{ required: true, message: '请输入链路名称' }],
    };
    // 获取链路信息列表
    const getZongjuLianlu = function () {
      tableLoading.value = true;
      getAllZongjuLianlu(selectLianluCode.value).then((res) => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          zongjuData.lianluData = res.data
          tableLoading.value = false;
          if (!selectLianluCode.value) {
            selectLianluDataList.value.push(...result.data);
          }
        }
      })
    }
    const addLianlu = function () {
      zongjuData.isShow = true;
      zongjuData.isAdd = true;
    }
    // 删除链路
    const delLianlu = function (id: string) {
      delZongjuLianlu(id).then(res => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          getZongjuLianlu();
          message.success('删除成功');
        }
      })
    }
    // 保存链路
    const saveLianlu = function () {
      delete form['id']
      addZongjuLianlu(form).then(res => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          message.success(result.message);
          getZongjuLianlu();
          closeDrawer()
        } else {
          message.error(result.message)
        }
      })
    }
    // 编辑链路
    const editLianlu = (info: LianluDataDto) => {
      Object.assign(form, info)
      zongjuData.isAdd = false;
      zongjuData.isShow = true;
    }
    // 更新链路
    const updataLianlu = () => {
      updataZongjuLianlu(form).then(res => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          message.success(result.message);
          getZongjuLianlu();
          closeDrawer()
        } else {
          message.error(result.message)
        }
      })
    }
    // 重置表单内容
    const resetForm = () => {
      const value = formRef.value as FormInstance;
      value.resetFields();
    };
    // 关闭抽屉
    const closeDrawer = function () {
      resetForm()
      zongjuData.isShow = false
    }
    // 获取所有节点信息
    const getAllNodeList = function () {
      getAllNode().then((res) => {
        const result = res as unknown as NodeResultDto
        if (result.code === 200) {
          nodeLists.length = 0;
          nodeLists.push(...result.data)
        }
      })
    }
    // 选择链路编号
    const changeLianluSelect = (value: string) => {
      console.log(value);
      console.log(selectLianluCode.value);
      getZongjuLianlu();
    }
    // 复制链路信息
    const copyLianluInfo = (record: LianluDataDto) => {
      const lianluInfoStr = `${record.lianlu_start}至${record.lianlu_end}编号${record.lianlu_code}`
      navigator.clipboard.writeText(lianluInfoStr)
      message.success('复制成功！')
    }

    onMounted(() => {
      zongjuData.isShow = false
      getAllNodeList()
      getZongjuLianlu()
    })
    return {
      zongjuData,
      columns,
      tableLoading,
      form,
      rules,
      formRef,
      selectedNodeName,
      selectLianluDataList,
      selectLianluCode,
      nodeLists,
      // function
      resetForm,
      addLianlu,
      delLianlu,
      closeDrawer,
      saveLianlu,
      editLianlu,
      updataLianlu,
      changeLianluSelect,
      copyLianluInfo
    };
  },
});
</script>
<style scoped>
th.column-money,
td.column-money {
  text-align: right !important;
}
.contentBox {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 2px #ddd;
}
</style>
